<template>
  <v-dialog-layout
    title="添加角色"
    width="500px"
    v-model:visible="visible"
    @confirm="formAdd.onSubmit()"
    @cancel="cancel"
  >
    <v-form-layout
      ref="formAdd"
      v-model:form-data="formData"
      :rules="rules"
      @validateSuccess="validateSuccess"
    >
      <a-form-item label="所属菜单" name="enabled">
        <a-select
          showSearch
          :filterOption="filterOption"
          v-model:value="formData.menuId"
          placeholder="请选择"
        >
          <template v-for="item in menuList" :key="item.id">
            <a-select-option :value="item.id">{{ item.title }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="按钮名称" name="btnName" placeholder="请输入应用名称">
        <a-input v-model:value.trim="formData.btnName" />
      </a-form-item>
      <a-form-item label="按钮编号" name="btnCode" placeholder="请输入应用编号">
        <a-input v-model:value.trim="formData.btnCode" />
      </a-form-item>
      <a-form-item label="是否可用" name="enabled">
        <a-select v-model:value="formData.enabled" placeholder="请选择">
          <a-select-option :value="0">否</a-select-option>
          <a-select-option :value="1">是</a-select-option>
        </a-select>
      </a-form-item>
    </v-form-layout>
  </v-dialog-layout>
</template>

<script setup lang="ts">
import { addRules } from './config'
import { ref, reactive, onMounted, Ref } from 'vue'
import { message } from 'ant-design-vue'
import useCurrentInstance from 'lib-utils/vueInstance'

const { proxy } = useCurrentInstance()
const props = withDefaults(defineProps<{
  visible: boolean,
  initForm: { [key: string]: any } | null
}>(), {
  visible: false
})
const emit = defineEmits(['update:visible', 'close'])

let formAdd = ref();
let menuList:Ref<any> = ref([]);
const formData: {
  id?: string | number,
  menuId: number | null,
  btnName: string,
  btnCode: string,
  enabled: number
} = reactive({
  id: '',
  menuId: null,
  btnName: '',
  btnCode: '',
  enabled: 1
});
const rules = addRules

onMounted(() => {
  getAllMenus()
  if (props.initForm) {
    for (let item in formData) {
      formData[item] = props.initForm[item]
    }
    formData.id = props.initForm['id']
  }
})

const validateSuccess = () => {
  if (formData.id) {
    proxy.$http.post(proxy.$api.btn.update, formData).then(res => {
      message.success('更新成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  } else {
    delete formData['id']
    proxy.$http.post(proxy.$api.btn.add, formData).then(res => {
      message.success('添加成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  }
};

const getAllMenus = () => {
  proxy.$http.get(proxy.$api.menu.listAll).then(res => {
    menuList.value = res
  }).catch(() => {
  })
}

const filterOption = (inputValue, option) => {
  console.log(option)
  if (option.children[0].children.indexOf(inputValue.trim()) > -1) {
    return true
  }
  return false
}

const cancel = () => {
  emit('update:visible', false)
};

</script>

<style scoped>
</style>